<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="用户名">
    <el-input v-model="user.username" placeholder="输入姓名"></el-input>
  </el-form-item>
   <el-form-item label="用户性别">
    <el-select v-model="user.sex" placeholder="性别" @change="changeSelect">
      <el-option label="女" value="女"></el-option>
      <el-option label="男" value="男"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="用户类别">
    <el-select v-model="user.type" placeholder="用户类别" @change="changeSelect">
      <el-option label="封禁用户" value="0"></el-option>
      <el-option label="普通用户" value="1"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="排序条件">
    <el-select v-model="condition" placeholder="排序条件" @change="changeCondition">
      <el-option label="创建时间" value="createtime"></el-option>
      <el-option label="收藏数" value="collection"></el-option>
      <el-option label="发布数" value="publish"></el-option>
      <el-option label="关注数" value="concern"></el-option>
      <el-option label="粉丝数" value="fan"></el-option>
    </el-select>
  </el-form-item>


<el-form-item label="排序类型">
    <el-select v-model="sort" placeholder="排序条件" @change="changeSort">
      <el-option label="降序" value="desc"></el-option>
      <el-option label="升序" value="asc"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
    <el-button type="primary" @click="selall">获取所有</el-button>
  </el-form-item> 



   <el-table
    :data="blogData.data"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="用户id"
      width="150">
    </el-table-column>
    <el-table-column
      prop="username" 
      label="用户名字"
      width="120">
    </el-table-column>
<el-table-column
      prop="password"
      label="密码"
      width="120">
    </el-table-column>
     <el-table-column
      prop="type"
      label="用户状态"
      width="120">
      <template #default="scope">
           <p v-show="`${scope.row.type}`==1">
            普通用户
           </p>
            <p v-show="`${scope.row.type}`==0">
            封禁用户
           </p>
                  </template>
    </el-table-column>
            <el-table-column
      prop="sex"
      label="性别"
      width="120">
    </el-table-column>
    <el-table-column
      prop="img"
      label="用户图片"
      width="120">
      <template #default="scope">
                    <el-image  v-if="`${scope.row.img}`!=''" style="width:100px;height:100px;margin-bottom:-4px;"
                      :src="`http://114.132.214.60:8080/blog/cat?img=${scope.row.img}`">
                    </el-image>
                    <p v-else>
                      未设头像
                    </p>
                  </template>
    </el-table-column>
    
    <el-table-column
      prop="email"
      label="邮箱"
      width="120">
    </el-table-column>

     <el-table-column
      prop="publish"
      label="发布数"
      width="120">
    </el-table-column>
   
     <el-table-column
      prop="concern"
      label="关注数"
      width="120">
    </el-table-column>
     <el-table-column
      prop="fan"
      label="粉丝数"
      width="120">
    </el-table-column>
     <el-table-column
      prop="collection"
      label="收藏数"
      width="120">
    </el-table-column>
        <el-table-column
      prop="createtime"
      label="创建时间"
      width="120">
    </el-table-column>
    
  
    
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="toEditor(scope.row)">编辑</el-button>
        <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-form>

<el-pagination
@current-change="topages"
@next-click="next"
@prev-click="pre"
  background
  layout="prev, pager, next"
  :page-size="pageSize"
  :total="total">
</el-pagination>




<el-dialog
  title="用户编辑"
  :visible.sync="dialogVisible1"
  :before-close="handleClose">
  

<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
  <el-form-item label="用户名称">
    <!-- <el-input v-model="formLabelAlign.name"></el-input> -->
    {{formLabelAlign.username}}
  </el-form-item>
   <el-form-item label="设置用户状态">
    <el-select v-model="formLabelAlign.type" placeholder="用户类型" @change="changeSelect1">
      <el-option label="封禁用户" value="0" ></el-option>
      <el-option label="普通用户" value="1" ></el-option>
    </el-select>
  </el-form-item>
</el-form>

    <el-button @click="noUpdate" >取 消</el-button>
    <el-button type="primary" @click="updateBlog()">确 定</el-button>
  </span>
</el-dialog>


  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
      user: {
        sex: "",
        type: "",
        username: "",
      },

      // 排序条件
      condition: "",
      // 排序类型
      sort: "",
      // 通过的验证字段
      isaudit: false,
      labelPosition: "left",
      formLabelAlign: {
        id:"",
        username: "",
        type: "",
      },

      // 博客内容
      bloginfo: "",

      // 请求的页数
      page: 1,
      pageSize: 5,

      // 查询条件
      title: "",
      cname: "",
      username: "",
      Classify: "",

      // 数据集合
      blogData: {},

      // 以下为分页器
      total: 89,

      //  显示提示框（编辑的）
      dialogVisible1: false,
      // 表单
      formInline: {
        user: "",
        region: "",
      },
    };
  },
  mounted() {
    this.getUserList();
    this.getClassifys();
  },
  methods: {
    // 删除文章
    del(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$API.user
            .delUser(e.id)
            .then(() => {
              this.$message({
                type: "success", 
                message: "删除成功!",
              });
              this.getUserList();
            })
            .catch((e) => {
              this.$message({
                type: "error",
                message: e,
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 排序条件
    changeCondition(e) {
      this.condition = e;
      console.log(this.condition);
    },
    // 排序类型
    changeSort(e) {
      this.sort = e;
      console.log(this.sort);
    },
    // 确认修改
    updateBlog() {
     if(this.formLabelAlign.type==""){
      return  this.$message({
            message: "未设置状态",
            type: "warning",
          });
     }
      this.$API.user 
        .upUser(
        this.formLabelAlign
        )
        .then((e) => {
          this.$message({
            message: e.msg,
            type: "success",
          });
        })
        .catch((e) => {
          this.$message.error(e.msg);
        });

      this.formLabelAlign.username = ""
      this.formLabelAlign.type = "";
      this.dialogVisible1 = false;
      this.getUserList();
    },
    // 取消修改
    noUpdate() {
      this.dialogVisible1 = false;
      this.formLabelAlign.id=""
      this.formLabelAlign.username = ""
      this.formLabelAlign.type = "";
    },
    // 修改选项
    changeSelect1(e) {
    
    },
    // 编辑
    toEditor(e) {
      this.formLabelAlign.id=e.id
      this.formLabelAlign.username = e.username;
      this.dialogVisible1 = true;
    },
    // 获取所有文章数据
    selall() {
      this.sort = "";
      this.condition = "";
      this.username = "";
      this.title = "";
      this.cname = "";
      this.getUserList();
    },
    // 获取文章详情
    async getBlogInfo(id) {
      let result = await this.$API.blog.getBlogInfo(id);
      this.bloginfo = result.data.content;
    },
    // 获取分类
    changeSelect(e) {
      console.log(e);
      this.cname = e;
    },
    // 获取分类数据
    async getClassifys() {
      const result = await this.$API.blog.getClassifys();
      if (result.code == 200) {
        this.Classify = result.data;
        console.log(this.Classify);
      }
    },
    // 切换页面
    topages(e) {
      this.page = e;
      this.getUserList();
    },
    //切换下一页
    next() {
      this.page++;
      this.getUserList();
    },
    // 切换上一页
    pre() {
      this.page--;
      this.getUserList();
    },
    // 页面初始化的数据
    async getUserList() {
      const result = await this.$API.user.getUserList(
        this.user,
        this.condition,
        this.sort,
        this.page,
        this.pageSize
      );
      console.log(result);
      if (result.code == 200) {
        this.blogData = result.data;
        this.total = result.data.size;
        console.log(this.total);
      }
    },
    async onSubmit() {
      this.getUserList();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style>
.el-pagination {
  margin-top: 50px;
}
</style>